<!-- 使用类型以及折扣类型设置弹出窗 -->
<template>
	<div>
		<el-dialog :title="state.title" v-model="state.isShowDialog" center class="borderRadius10" width="590">
			<section>
				<el-form ref="ruleFormRef" :model="ruleForm" label-width="120px" status-icon>
					<el-form-item label="商品类型：" prop="tempId">
						<section class="flex" style="flex-direction: column;">
							<section class="mb20">
								<el-cascader v-model="ruleForm.typeList" class="width360" placeholder="请选择商品类型"
									@change="typeChangeFun" :options="state.productTypeList" :show-all-levels="false"
									ref="typeCascader" :props="{
										label: 'dictName', value: 'dictValue', children: 'children',
										multiple: true, checkStrictly: true
									}" />
							</section>
							<section>
								<el-table :data="ruleForm.selectedTypeList" border style="width: auto">
									<el-table-column label="使用类型" show-overflow-tooltip>
										<template #default="scope">
											<span>{{ scope.row.name }}</span>
										</template>
									</el-table-column>
									<el-table-column label="折扣比例" v-if="state.type == 'handselDiscountType' || state.type == 'discountType'" show-overflow-tooltip>
										<template #default="scope">
											<el-input v-model="scope.row.discount" placeholder="请输入" />
										</template>
									</el-table-column>
								</el-table>
							</section>
						</section>
					</el-form-item>
				</el-form>
			</section>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel">取 消</el-button>
					<el-button type="primary" @click="onSubmit">确 认</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { reactive, ref, nextTick } from 'vue';
import { configData } from '/@/api/common';
const emit = defineEmits(['useTypeFun'])
const typeCascader = ref();
const ruleForm = reactive({
	typeList: [],
	selectedTypeList: [] as Array<any>,
})

const state = reactive({
	loading: false,
	isShowDialog: false,
	type: '',
	title: '',
	cropperImgBase64: '',
	param: {
		type: 1,
		keyWord: "",
		pageNum: 1,
		pageSize: 10,
	},
	productTypeList: [] as Array<any>,

});

// 打开弹窗
const openDialog = (type: string, data: any = []) => {
	state.type = type;
	nextTick(() => {
		if(type == 'useType'){ // 使用类型设置
			state.title = "可用类型设置";
		}else if(type == 'discountType'){ //折扣类型设置
			state.title = "折扣类型设置";
		}else if(type == 'handselUserType'){ //赠金使用类型设置
			state.title = "赠金可用类型设置";
		}else if(type == 'handselDiscountType'){//赠金折扣类型设置
			state.title = "赠金折扣类型设置";
		}
		state.isShowDialog = true;
		ruleForm.typeList = [];
		ruleForm.selectedTypeList = Array.from(data);
		ruleForm.selectedTypeList.map((item:any) =>{
			ruleForm.typeList.push(item.typeIdList)
		})
		getChainList();
	});
};

// 获取商品类型列表
const getChainList = async () => {
	const { results } = await configData({ dictType: '' });
	state.productTypeList = results.spuType;
	state.productTypeList.forEach((Obj: any) => {
		if (Obj.children != null && Obj.children.length > 0) {
			Obj.disabled = true
		}
	})
}

// 类型选择
const typeChangeFun = (value: any) => {
	const paths = value;
	const results: any[] = [];
	
	paths.forEach((path: any[]) => {
		let currentNode = state.productTypeList.find(node => node.dictValue === path[0]);
		console.log(currentNode)
		if (currentNode && currentNode.children) {
			const childNode = currentNode.children.find((child: any) => child.dictValue === path[1]);
			if (childNode) {
				if(state.type == 'handselUserType' || state.type == 'useType'){
					results.push({ name: childNode.dictName, typeIdList: path }); // 或者 results.push(childNode.value);  
				}else{
					results.push({ name: childNode.dictName, typeIdList: path, discount: null }); // 或者 results.push(childNode.value);  
				}
				
			}
		} else {
			if(state.type == 'handselUserType' || state.type == 'useType'){
				results.push({ name: currentNode.dictName, typeIdList: path }); // 或者 results.push(childNode.value);  
			}else{
				results.push({ name: currentNode.dictName, typeIdList: path, discount: null }); // 或者 results.push(childNode.value);  
			}
		}
	});
	ruleForm.selectedTypeList = results;
}

// 关闭弹窗
const closeDialog = () => {
	state.isShowDialog = false;
};

// 取消
const onCancel = () => {
	closeDialog();
};

const onSubmit = () => {
	emit('useTypeFun', state.type, ruleForm.selectedTypeList);
	closeDialog();
}

// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style scoped lang="scss"></style>
